<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>附件管理</title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />

    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">



    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
          rel="stylesheet">

    <!--    jq-->
    <script th:src="@{/assets/js/jquery.min.js}"></script>



    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

    <!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>

    <!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js"></script>

    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js"></script>

    <!-- 主要的 fileinput 插件库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

    <!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js"></script>

    <!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js"></script>


    <script th:src="@{/back/js/bootstrap.js}"></script>
    <script th:src="@{/back/js/sweetalert2.min.js}"></script>
    <script th:src="@{/back/js/jquery.app.js}"></script>
    <script th:src="@{/back/js/base.js}"></script>
</head>

<style>
    .ip_input {
        width: 40px;
        height: 20px;
        font: normal 16px 宋体;
        color: #000000;
        border: 0px;
        text-align: center;
        position: relative;
        top: 1px;
    }

    .all_input {
        width: 210px;
        height: 30px;
        font: normal 8px 宋体;
        color: #000000;
        border: 1px solid #000000;
        text-align: center;
    }

    #i1 {
        width: 260px;
        height: 30px;
        float: left;
    }

    #i2 {
        width: 54px;
        height: 33.6px;
        float: left;
    }

    #context {
        width: 190px;
        height: 33.6px;
        float: left;
    }

</style>

<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">附件管理</li>
                <li>附件上传</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">

<!--                    图片展示-->
                    <div id="show" class="row">

                        <div class="col-lg-2 col-md-3 col-sm-6 col-6 div-thumbnail img-rounded text-center m-t-10"
                             th:each="img: ${imgs}">
                            <a target="_blank">
                                <img class="img-thumbnail img-fluid img-responsive"
                                     th:src="${img.getSmall_img()}">
                            </a>

                            <div class="clearfix">
                                <a type="button" th:href="@{'/pear/file/download?f='+${img.getId()}}"
                                   class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                                    <i class="fa fa-copy"></i>
                                    <span>下载</span>
                                </a>
                                <button class="btn btn-danger btn-sm waves-effect waves-light m-t-5" th:onclick="'delfile('+${img.getId()}+')'">
                                    <i class="fa fa-trash-o"></i>
                                    <span>删除</span>
                                </button>

                            </div>

                        </div>

                    </div>



                </div>
                <div class="layui-tab-item" id="upl">

                    <!--                    图片上传-->
                    <div id="up" class="col-md-12">


                        <form method="post" th:action="@{/pear/file/upload}" class="form-horizontal" role="form"
                              id="global-form" enctype="multipart/form-data">

                            <input id="uploadPicture" name="files" type="file" multiple=true class="file-loading">


                            <div class="clearfix pull-right">
                                <button class="layui-btn" id="submit01" lay-submit lay-filter="submit01">立即上传</button>

                            </div>

                        </form>


                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
</body>


<script type="text/html" id="log-createTime">
    {{layui.util.toDateString(d.visit_time,  "yyyy-MM-dd HH:mm:ss")}}
</script>
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script>
    // 获取<meta>标签中封装的_csrf信息 ,否则会请求403
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var headers = {"X-CSRF-TOKEN": token}
    layui.use(['table','form','jquery','element'],function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;



        form.on('submit(dict-type-query)', function(data){
            table.reload('dict-type-table',{where:data.field})
            return false;
        });


        //上传附件
        form.on('submit(submit01)', function(data){
            layer.confirm('您确定上传吗?', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    var formdata = new FormData($('#global-form')[0]);
                    let loading = layer.load();
                    $.ajax({
                        url: "/pear/file/upload",
                        data: formdata,  //ajax提交表单
                        dataType: 'json',
                        type: 'POST',
                        headers:headers,
                        processData: false,
                        contentType: false,
                        success: function(result) {
                            layer.close(loading);
                            if (result.success) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                    time: 1000
                                });
                                setTimeout('window.location.reload()',500);
                            } else {
                                layer.msg(result.msg, {
                                    icon: 2,
                                    time: 1000
                                });
                            }
                        }
                    })
                }
            );


            return false;
        });


        window.error = function(obj){
            layer.open({
                type: 1,
                title: '异常信息',
                shade: 0,
                area: ['450px', '350px'],
                content: '<div class="pear-container"><div class="layui-card"><div class="layui-card-body">'+obj.data['error']+'</div></div></div>'
            });
        }


        $(function () {
            $("#uploadPicture").fileinput({
                uploadUrl: "/pear/file/upload",
                previewFileType: "image",
                uploadAsync: true,
                showCaption: false,
                allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp"],
                enctype: 'multipart/form-data',
                //隐藏上传按钮
                showUpload: false,
                //最大上传文件数量
                maxFileCount: 8,
                //上传文件最大大小（kb）
                maxFileSize: 5120,
                showBrowse: true,
                dropZoneTitle: '拖拽头像图片到这里...',
                browseLabel: "选择图片",
                uploadClass: "btn btn-info",
                uploadLabel: "上传",
                removeClass: "btn btn-danger",
                autoReplace: true,
                removeLabel: "移除",
                msgSizeTooLarge: '图片文件太大！',
                msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})！",
                msgUploadEnd: '图片上传成功！',
                msgUploadBegin: '初始化中...',
                msgZoomModalHeading: '图片详情预览',
                msgInvalidFileExtension: '非法文件扩展名 "{name}"！ 仅支持 "{extensions}" 的文件扩展名！'
            }).on('fileerror', function (event, data, msg) {
                alert('图片上传失败！' + msg);
            }).on('fileuploaded', function (event, data) {
                $("#picName").val(data.response.name);
                $('#uploadPicture').fileinput('disable');
            }).on('fileclear', function (event) {
                alert("图片被清除啦！");
            });

        });
        $('#upl').css('height','500px');

    })



    function delfile(id){
        //ajax异步请求
        layer.confirm('确定要删除该附件', {
            icon: 3,
            title: '提示'
        }, function(index) {
            layer.close(index);
            let loading = layer.load();
            $.ajax({
                url: "/pear/file/delete?id="+id,
                dataType: 'json',
                type: 'GET',
                success: function(result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                           window.location.reload(); //刷新当前页
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
        });

    }


</script>
</html>